const page = {
	template: `
		<div class="pagination" v-if="totalPage>1">
		<ul class="pagination">
			<li class="page-item" :class="{'disabled':currentPage<=1}" @click="currentPage<=1?'':turn(currentPage-1)">
				<a class="page-link" href="#" aria-label="Previous">
					<span aria-hidden="true">&laquo;</span>
				</a>
			</li>

			<li v-for="i in showPageBtn" class="page-item" :class="{'active':i==currentPage}" @click="turn(i)">
				<a class="page-link" href="#">{{i}}</a>	
			</li>
		
			<li class="next" :class="['page-item', {'disabled':currentPage>=totalPage}]"  @click="currentPage>=totalPage?'':turn(currentPage+1)">
				<a class="page-link" href="#" aria-label="Next">
					<span aria-hidden="true">&raquo;</span>
				</a>
			</li>
		</ul>
		<span  v-if="all" class="jump">前往<input type="number" autocomplete="off" min="1" :max="totalPage" v-model="goPage" @keyup.enter="turn(goPage)">页</span>
		</div>
  	`,
	name:'MyPagination',
	props: {
	currentPage: {//当前页
		type: Number,
		default: 1,
	},
	limit:{//每页显示条数
		type: Number,
		default: 10,
	},
	totalCount:{//总条数
		type: Number,
		required: true
	},
	small:{
		type:Boolean,
		default: false,
	},
	all:{
		type:Boolean,
		default: false,
	}
	},
	data() {
	return {
		goPage:'',
		limitNum:'',
		limitNums:[5,10,15,20,25,30],
		toPrev:false,
		toNext:false,
		rightSize: 2,//当前页左边显示几个页码
		leftSize: 2,//当前页右边显示几个页码
	}
	},
	created: function () {
	this.initLimitNums();
	},
	computed: {
	totalPage(){
		return Math.ceil(this.totalCount / this.limit)
	},
	showPageBtn() {
		//根据当前页始终保持显示5个页码， 显示当前页码前两个后两个
		let pageNum = Number(this.totalPage)//总页数
		let index = Number(this.currentPage)//当前页
		let windowSize = this.rightSize + this.leftSize + 1,
		arr = [];
		if (pageNum <= windowSize) {
		for(let i = 1; i <= pageNum; i++) {
			arr.push(i)
		}
		return arr;
		}
		if (index+ this.rightSize >= pageNum) {
			//页码显示到最后
			arr[0] = pageNum - windowSize + 1;
			this.hasRight = false;
			this.hasLeft = true;
		}
		else if (index - this.leftSize <= 0) {

			//从第一页开始
			arr[0] = 1;
			this.hasRight = true;
			this.hasLeft = false;
		} else {
			arr[0] = index - this.leftSize;
			this.hasRight = true;
			this.hasLeft = true;
		}

		for (let i = 1; i < windowSize; i++) {
			//只添加到最大页数
			if(arr[i-1]>pageNum){
				break;
			}
			arr[i] = arr[0] + i;
		}
		return arr
	}
	},
	methods: {
	initLimitNums() {
		this.limitNum=this.limit;
		//if (this.limitNums.indexOf(this.limit) == -1) {
		if (!this.limitNums.includes(this.limit)) {
		this.limitNums.push(this.limit);
		this.limitNums.sort(function (a, b) {
			return a-b;
		});
		}
	},
	//翻页，显示条数变化
	turn(page) {
		let i = parseInt(Number(page));
		if(i<1){
		i=1;
		}else if(i>this.totalPage){
		i=this.totalPage;
		}
		if(this.limitNum!==this.limit&&this.limitNum!==''){//每页显示条数改变
		let pages=Math.ceil(this.totalCount / this.limitNum);
		if(page>pages){
			i=pages;
		}
		this.$emit('update:limit', this.limitNum);
		}
		this.$emit('update:currentPage', i);
		this.$emit('turn');
	}
	}
};

export default page;